Fox 3.0 Router 视图-整体更新

整体更新（不推荐）

fox router兼容vue router的整体替换策略，也就是在route table中构建完整的页面结构，整体替换fox-router-view下面的内容

例子

例子代码：sites/example/pages/program-navigate-all 例子说明：在index.ts的路由表中构造了父子结构，通过个router的to方法，把完整的页面结构嵌入到name=default的fox-router-view中

API

push方法的参数类型有两种:(route)|(path, data, root)

参数A（route路由对象）

fox.router.push(route)

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法

参数B(参数列表):

fox.router.push(path/name, data, root)

属性	类型	说明
path	string	路由路径
name	string	路由名称
data	Object	路由参数
root	string	装载组件的router-view的名称

index.ts（路由表注册）

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:38:12
 */

import panel from './components/panel.vue'
import home from './components/home.vue'
import about from './components/about.vue'

import notFound from '../not-found/index.vue'


//路由表
let routes = [
    {
        path:'/',
        redirect:'/panel/home'
    },
    {
        path:'/panel',
        component:panel,
        children:[
            {
                path:'home',
                component:home,
            },
            {
                path:'about',
                component:about,
            }
        ]
    },
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute( {
            path:'/notFound',
            component: notFound,
        },)
        //加入路由
        fox.router.addRoutes(routes)
    }

} 

index.vue（路由演示）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:22:17
-->
<template>
    <div>
        <button class="my-button" @click="toHome">go home</button>
        <button class="my-button" @click="toAbout">go about</button>
        <button class="my-button" @click="toOther">go other</button>
    </div>
    <div class="my-router-view-div">
        <fox-router-view></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
// import { useFox } from '../../core/index'
import { FoxApp } from './index'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装fox app
        FoxApp.install(fox)

        let router = fox.router
        let toHome = ()=>{
             router.push('/panel/home')
        }

        let toAbout = ()=>{
            router.push('/panel/about')
        }

        let toOther = ()=>{
            router.push('/panel/other')
        }

        return {
            toHome,
            toAbout,
            toOther
        }
    },
})
</script>

<style>
    .fox-card-views{
        padding: 0px 0x 0px 0px;
    }

    .fox-card-view{
        position: relative;
        overflow: hidden;
    }

    .fox-card-view-trans-enter {}

    .fox-card-view-trans-enter-active {
       animation: fox-card-view-in-slide-right 330ms;
        -webkit-animation: fox-card-view-in-slide-right 330ms;
        z-index: 120;
    }

    .fox-card-view-trans-enter-to {}

    /* 进场动画 */
    @-webkit-keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
    @keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
</style>